<template>
  <div>
    <div class="rect" style="top:788px;height:257px"></div>
    <div class="wrap">
      <div class="qk-title flex-row-center-center" style="margin-top:-1px">
        <img src="@/assets/jcdnum.png" alt width="30" height="30" />
        <div class="qk-title-num">检测点信息</div>
      </div>
      <div class="kq-table">
        <div class="flex-row-start-start table-title">
          <div class="kq-table-id table-title-style">编号</div>
          <div class="kq-table-id table-title-style">库区名称</div>
          <div class="kq-table-title table-title-style">井组名称</div>
          <div class="kq-table-title table-title-style">检测点名称</div>
        </div>
        <div style="margin-top: 12px" class="table-content-wrap">
          <div style="cursor: pointer" v-for="(item,index) in jzList" :key="item.title" class="table-unit flex-row-center-center" @click="goToSpecJzView(item)">
            <div class="kq-table-id  table-unit-value1">{{index+1}}</div>
            <div class="kq-table-title  table-unit-value1">{{item.kqName}}</div>
            <div class="kq-table-title  table-unit-value1">{{item.jzName}}</div>
            <div class="kq-table-title  table-unit-value1">{{item.jcdName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data(){
        return {
            tableData: [
            {id: 1,title: "刘庄",time:'2020年8月12日'},
            {id:2,title:'金坛',time:'2020年3月14日'},
            {id:3,title:'库区3',time:'2019年5月23日'}
            ]
        }
    },
    props:{
      selQk:String,
      jzList:Array,
      showJz:Boolean,
    },
    methods: {
      goToSpecJzView(item) {
        // let o = {};
        // o.name = item.jzId;
        // o.showEventType = true;
        // this.$emit("change-to-jz", o);

        this.$store.state.selJzId = item.jzId;

      }
    },
};
</script>
<style scoped>
.table-content-wrap{
  height: 180px;
  overflow: scroll;
}
div::-webkit-scrollbar{
  width: 0;
}
.table-unit-value1 {
  color: black;
  font-size: 14px;
  text-align: center;
  font-family: SourceHanSansSC-regular;
}
.table-unit-value2 {
  color: black;
  font-size: 14px;
  text-align: center;
  font-family: SourceHanSansSC-regular;
}
.table-unit {
  height: 44px;
  line-height: 20px;
  /* background-color: rgba(197, 86, 90, 0.6); */
  color: black;
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  /* border: 1px solid rgba(255, 255, 255, 100); */
}
.table-title-style {
  height: 20px;
  color: black;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  font-family: SourceHanSansSC-regular;
}
.kq-table-id {
  width: 20%;
}
.kq-table-title {
  width: 30%;
}
.kq-table-title {
  width: 35%;
}
.kq-table-time {
  width: 45%;
}
.kq-table {
  margin-top: 15px;
  margin-left: 41px;
  margin-right: 28px;
}
.wrap {
  width: 100%;
  height: 252px;
  line-height: 20px;
  opacity: 0.82;
  background-color: transparent;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(255,157,160, 60);
  font-family: Roboto;
  border: 1px solid #cc0000;
}
.corner-wrap1 {
  margin-left: -1.5px;
  margin-top: -253px;
  z-index: 10;
}
.corner-wrap2 {
  margin-left: -1.5px;
  margin-top: 234px;
  z-index: 10;
}
.corner-wrap3 {
  margin-right: -1.5px;
  margin-top: -9.5px;
  z-index: 10;
}
.corner-wrap4 {
  margin-right: -1.5px;
  margin-top: -10.5px;
  z-index: 10;
}


</style>